<template>
  <div class="reactive">
    <p>object:{{obj}}</p>
    <button @click="changeObj">++</button>
    <button @click="changeObj1">*--*</button>
    <br>

  </div>
</template>
<script lang="ts" setup>
import { shallowReactive } from "vue";
// shallowReactive
// 创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (暴露原始值)。
// dom挂载之后  ，只能修改第一层的数据
let obj = shallowReactive({
  name: "小陈",
  num: 1,
  nav: {
    bar: {
      ll: "s太深了 不写了",
    },
  },
});
const changeObj = () => {
  obj.num++;
};

const changeObj1 = () => {
  obj.nav.bar.ll = "dom为挂载之前可以改值";
};
changeObj();
changeObj1();
</script>

<style lang="less" scoped>
div {
  font-size: 20px;
}
</style>
